<template>
    <el-container>
        <el-main>
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="padding-left: 0;">
                    <el-form ref="searchForm" class="searchForm" :model="searchForm" label-width="80px">
                        <el-row :gutter="20" style="height: 30px;">
                            <el-col :span="6">
                                <el-form-item label="单位名称" label-width="70px">
                                    <el-input v-model="parentName" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="职务名称" label-width="70px">
                                    <el-input v-model="searchForm.name" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="buttons">
                    <el-button type="primary" icon="fa fa-plus" @click="openDialogDuty()">新增</el-button>
                    <el-button type="danger" icon="fa fa-trash-o" @click="delDuty()">删除</el-button>
                </div>
                <div class="tables">
                    <tableTemplate :data="dutyList" :options="dutyTableOptions"
                                   @handleSelectionChange="handleSelectionChange"
                                   @handleChangePage="handleChangePage"></tableTemplate>
                </div>
            </el-card>
            <el-dialog :title="dutyTitle" :visible.sync="dutyVisible" width="500px"  v-dialogDrag>
                <div class="dialogHead">
                    <el-form ref="dutyForm" :rules="rules" :model="dutyForm" label-width="100px" v-enterToNext>
                        <el-form-item label="单位名称" prop="parentName">
                            <el-input v-model="parentName" autocomplete="off" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="职务名称" prop="name">
                            <el-input v-model="dutyForm.name" autocomplete="off" placeholder="请输入部门名称"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveOrUpdateDeptDuty" v-btnLoading>确 定</el-button>
                    <el-button @click="dutyVisible = false">取 消</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    import sysGroupDutyApi from "@common/api/system/sysGroupDutyApi";

    export default {
        name: "SysGroupDuty",
        data(){
            return {
                parentSid: this.$route.query.parent_sid,
                parentName: this.$route.query.parent_name,
                searchForm: {},
                dutyList: [],
                dutyTableOptions: {
                    ref: 'dutyTable',
                    multiSelect: true,
                    columns: [
                        {
                            label: '单位名称',
                            prop: 'parent_name',
                            align: 'center',
                            width: 300,
                        },
                        {
                            label: '职务名称',
                            prop: 'name',
                            width: 300,
                            align: 'center',
                        },
                    ],
                    operates: {
                        fixed: 'right',
                        list: [
                            {
                                id: 'edit',
                                label: '编辑',
                                type: 'primary',
                                icon: 'fa fa-pencil',
                                size: 'mini',
                                show: true,
                                method: (index, row) => {
                                    this.openDialogDuty(row);
                                }
                            },
                        ]
                    },
                    pagination: {
                        pageIndex: 1
                    }
                },
                rules: {
                    name: [{required: true, message: '请输入职务名称', trigger: 'blur'}],
                },
                dutyForm: {},
                dutyTitle: '',
                dutyVisible: false,
                selection: [],

            }
        },
        mounted (){
            this.getList();
        },
        methods: {
            openDialogDuty(row){
                if(!row){
                    this.dutyForm = {group_sid: this.parentSid,};
                    this.dutyTitle = '新增职务管理';
                }else {
                    this.dutyTitle = '编辑职务管理';
                    this.dutyForm = Object.assign({}, this.dutyForm, row);
                }
                if (this.$refs['dutyForm']) {
                    this.$refs['dutyForm'].clearValidate();
                }
                this.dutyVisible = true;
            },

            //获取部门管理列表
            getList(search){
                let $this = this;
                $this.dutyList = [];
                if (search) {
                    $this.dutyTableOptions = $this.resetTablePagination($this.dutyTableOptions);
                }
                let queryData = $this.getQueryParams($this.dutyTableOptions, $this.searchForm);
                queryData.group_sid = $this.parentSid;
                sysGroupDutyApi.findSysGroupDutys(queryData, result => {
                    $this.dutyList = result.data || [];
                    $this.dutyTableOptions = $this.setTableTotal($this.dutyTableOptions, result);
                });
            },

            // 分页切换
            handleChangePage() {
                this.getList();
            },

            //选中复选框
            handleSelectionChange(val){
                this.selection = val;
            },

            //删除部门管理
            delDuty(){
                let $this = this;
                if ($this.selection.length == 0) {
                    this.$message.info('请先选择需要删除的职务');
                    return;
                }
                $this.$confirm('是否删除该职务?', '温馨提示', {
                    cancelButtonClass: 'btn-custom-cancel',
                    confirmButtonText: '确定', cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let subData = [];
                    $this.selection.forEach(function (item) {
                        subData.push(item.id);
                    });
                    sysGroupDutyApi.batchDeleteDuty({ids: subData}, result => {
                        if (result.code === 0) {
                            $this.$message.success('删除成功！');
                            $this.getList();
                        }
                    });
                }).catch(() => {
                })
            },

            //保存部门管理
            saveOrUpdateDeptDuty(){
                let $this = this;
                $this.$refs['dutyForm'].validate(valid => {
                    if (valid) {
                        sysGroupDutyApi.saveSysGroupDuty($this.dutyForm, result => {
                            if (result.code === 0) {
                                $this.dutyVisible = false;
                                $this.$message.success('保存成功！');
                                $this.getList();
                            } else {
                                $this.dutyVisible = false;
                                $this.$message.error('保存失败');
                            }
                        });
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .buttons{
        margin: 0 0 10px 0;
    }
</style>
